<template>
  <div class="login_form_bg">
    <el-form
      @submit="submitForm"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <div class="login_form_title">
        <div class="zh">智能客服管理后台</div>
        <div class="en">Management System</div>
      </div>
      <el-form-item prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入用户名">
          <template #prefix>
            <el-icon :size="24">
              <UserFilled />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="ruleForm.password" placeholder="请输入登录密码">
          <template #prefix>
            <el-icon :size="24">
              <Lock />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          native-type="submit"
          :class="btnAnimation ? 'warn_animate' : ''"
        >
          {{ loading ? '登录中...' : '登录' }}
        </el-button>
      </el-form-item>
      <div class="warn_text" v-show="!!warnMsg">
        <el-icon :size="16">
          <WarningFilled />
        </el-icon>
        <span style="margin-left: 4px"> {{ warnMsg }}</span>
      </div>
      <div class="tips">忘记密码请联系管理员重置密码</div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import store from '@/store'

const ruleFormRef = ref<FormInstance>()
const warnMsg = ref('')
const router = useRouter()
const btnAnimation = ref(false)
const loading = ref(false)
const menuList = computed(() => {
  return store.getters.menuList
})
const validatePass = (rule: any, value: any, callback: any) => {
  if (value !== '') {
    const regex =
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&.])[A-Za-z\d$@$!%*?&.]{13,20}$/
    if (!regex.test(value)) {
      callback(new Error('请输入13-20位密码(包含数字、大小写字母、特殊字符)'))
    } else {
      callback()
    }
  }
}
const ruleForm = reactive({
  name: '',
  password: '',
})

const rules = reactive<FormRules>({
  name: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
  // password: [
  //   { required: true, message: '请填登录密码', trigger: 'blur' },
  //   { validator: validatePass, trigger: 'blur' },
  // ],
})

const submitForm = async (e) => {
  e.preventDefault()
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      warnMsg.value = ''
      console.log(menuList.value[0].path)
      router.push({
        path: menuList.value[0].path,
      })
    } else {
      btnAnimation.value = true
      setTimeout(() => {
        btnAnimation.value = false
      }, 1000)
      for (const key in fields) {
        warnMsg.value = fields[key][0].message
        return
      }
    }
  })
}
</script>
<style lang="scss">
.login_form_bg {
  background-color: rgba(26, 188, 156, 1);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .el-form {
    width: 400px;
    padding: 30px 50px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #333;

    .el-input {
      height: 50px;
    }

    .el-form-item__error {
      display: none;
    }

    .login_form_title {
      color: rgb(26, 188, 156);
      text-align: center;
      padding-bottom: 10px;

      .zh {
        font-size: 28px;
        font-weight: 700;
      }

      .en {
        font-size: 20px;
      }
    }

    .el-form-item__content {
      margin-left: 0 !important;
    }

    .el-button {
      width: 100%;
      height: 50px;
      font-size: 18px;
    }

    .tips {
      font-size: 13px;
      color: #999;
      text-align: right;
      padding-top: 4px;
    }

    .warn_text {
      padding: 10px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 3px;
      font-size: 12px;
      color: #fff;
      display: flex;
      align-items: center;
    }
  }
}

.warn_animate {
  animation-duration: 1s;
  /*动画时间*/
  animation-fill-mode: both;
  /*播放后的状态*/
  animation-name: buzz-out;
  animation-iteration-count: 1;
  /*动作循环的次数：infinite 无限循环*/
  transform-origin: center bottom;
  /*设置动画旋转元素的基点为：居中靠下*/
}

@keyframes buzz-out {
  0%,
  20%,
  50%,
  80%,
  100% {
    transition-timing-function: linear;
    transform: translate3d(0, 0, 0);
    /*设置只在Z轴上移动*/
  }

  30%,
  40% {
    transition-timing-function: linear;
    transform: translate3d(0, -12px, 0);
  }

  70% {
    transform: translate3d(0, -8px, 0);
  }

  90% {
    transform: translate3d(0, -4px, 0);
  }
}
</style>
